import { STYLES } from "../config/styles";
import { UI_STRINGS } from "../config/strings";
import { ReportView } from "./ReportView";
import { AutoFixPreview } from "./AutoFixPreview";
import type { AutoFixResult } from "../types/autoFix";
import type { BugReport } from "../types/bug";

type Props = {
  files: File[];
  url: string;
  runCheck: () => void;
  loading: boolean;
  report: BugReport | null;
  fixing: boolean;
  onFixIssue?: (issue: { file: string; line?: number; message?: string }) => void;
  onValidateReport?: () => void;
  validating?: boolean;
  scanCompleted?: boolean;
  result: AutoFixResult | null;
};

export function ScanPanel({ files, url, runCheck, loading, report, fixing, onFixIssue, onValidateReport, validating, scanCompleted, result }: Props) {
  const hasFiles = (files?.length ?? 0) > 0;
  const disabled = loading || (!hasFiles && !url);

  return (
    <div className={STYLES.card}>
      {/* 可选显示导入的仓库地址 */}
      {url && (
        <div className="mb-2 text-sm text-gray-600 truncate">导入仓库：{url}</div>
      )}

      {/* 检测按钮区 */}
      <div className="mb-4">
        <button
          onClick={runCheck}
          disabled={disabled}
          className={STYLES.btnPrimary}
        >
          {loading ? UI_STRINGS.checking : UI_STRINGS.startCheck}
        </button>
      </div>

      {/* 检测结果与预览，使用剩余空间并可滚动 */}
      <div className="flex-1 min-h-0 overflow-auto">
        <ReportView
          report={report}
          fixing={fixing}
          onFixIssue={onFixIssue}
          onValidateReport={onValidateReport}
          validating={validating}
          scanCompleted={scanCompleted}
        />

        <AutoFixPreview result={result} />
      </div>
    </div>
  );
}
